<template>
	<view class="tab-bar">
		<view class="bar" v-for="(tab,index) in tabData" :key="index" @click="tabClass(tab,index)">
			<image :class="selected === index?'img img-hov':'img'"
				:src="selected === index?tab.selectedIconPath:tab.iconPath" mode="widthFix"></image>
			<text :class="selected === index?'text text-hov':'text'">
				<text>{{tab.text}}</text>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData: [{
					"pagePath": "/pages/my-center/my-center",
					"iconPath": '/static/images/home_menu1.png',
					"selectedIconPath": '/static/images/home_menu1_hov.png',
					"text": "首页"
				}, {
					"pagePath": "/pages/attention/attention",
					"iconPath": '/static/images/home_menu2.png',
					"selectedIconPath": '/static/images/home_menu2_hov.png',
					"text": "关注"
				}, {
					"pagePath": "/pages/publish/publish",
					"iconPath": '/static/images/home_menu3.png',
					"selectedIconPath": '/static/images/home_menu3.png',
					"text": "发布"
				}, {
					"pagePath": "/pages/my-information/my-information",
					"iconPath": '/static/images/home_menu4.png',
					"selectedIconPath": '/static/images/home_menu4_hov.png',
					"text": "消息"
				}, {
					"pagePath": "/pages/index/index",
					"iconPath": '/static/images/home_menu5.png',
					"selectedIconPath": '/static/images/home_menu5_hov.png',
					"text": "我的"
				}]
			}
		},
		props: {
			selected: {
				type: Number,
				default: 0
			}
		},
		computed: {
			isLoggedIn() {
				return this.$store.state.user.isLoggedIn;
			},
		},
		methods: {
			tabClass(tab, index) {
					if (this.selected == index) {
						return
					}
					uni.redirectTo({
						url: tab.pagePath
					});
					return;
				
				// 其他菜单需要登录检查
				// if (!this.isLoggedIn) {
				// 	uni.showToast({
				// 		title: '请先登录',
				// 		icon: 'none'
				// 	});
				// 	// 跳转到我的页面
				// 	setTimeout(() => {
				// 		uni.redirectTo({
				// 			url: '/pages/index/index'
				// 		});
				// 	}, 1500);
				// 	return;
				// }
				
				if (this.selected == index) {
					return
				}
				uni.redirectTo({
					url: tab.pagePath
				});
			}
		},
	}
</script>

<style lang="less">
	.tab-bar {
		z-index: 100000;
		position: relative;
		display: flex;
		justify-content: space-around;
		background-color: #FFF7EE;
		border-radius: 10rpx 10rpx 0 0;
		.bar {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30rpx 10rpx;

			.img {
				width: 48rpx;
				height: 48rpx;
				margin-top: 2rpx;
			}

			&:nth-child(3) {
				.img {
					width: 94rpx;
					height: 94rpx;
					margin: -56rpx 0 5rpx;

				}
			}

			&:nth-child(4),
			&:nth-child(5) {
				.img {
					width: 44rpx;
					height: 44rpx;
					margin: 3px 0 2rpx;
				}
			}

			.text {
				position: relative;
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #333333;

				text {
					position: relative;
					z-index: 2;
				}

				&.text-hov {
					color: #AC6C17;
				}
			}
		}
	}
</style>